window.addEventListener('load', function () {
    // 轮播图
    var prev = document.querySelector('.prev');
    var next = document.querySelector('.next');
    var focus = document.querySelector('.focus');
    var focuswidth = focus.offsetWidth;
    var num = 0;
    var circle = 0;
    focus.addEventListener('mouseenter', function () {
        prev.style.display = 'block';
        next.style.display = 'block';
        clearInterval(timer);
        timer = null;
    })
    focus.addEventListener('mouseleave', function () {
        prev.style.display = 'none';
        next.style.display = 'none';
        timer = setInterval(function () {
            //手动调用点击事件
            next.click();
        }, 20000);

    })
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.promo-nav');
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
        li.setAttribute('index', i);
        ol.appendChild(li);
        li.addEventListener('click', function () {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].style.backgroundColor = '#fff';
            }
            this.style.backgroundColor = 'red';
            var index = this.getAttribute('index');
            num = index;
            circle = index;
            animate(ul, -index * focuswidth);
        })
    }
    ol.children[0].style.backgroundColor = 'red';

    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);

    var flag = true;
    next.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, num * focuswidth, function () {
                flag = true;
            });
            circle++;
            if (circle == ol.children.length) {
                circle = 0;
            }
            circleChange();
        }
    })
    prev.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * focuswidth + 'px';
            }
            num--;
            animate(ul, num * focuswidth, function () {
                flag = true;
            });
            circle--;
            if (circle < 0) {
                circle = ol.children.length - 1;
            }
            circleChange();
        }
    })
    function circleChange() {
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].style.backgroundColor = '#fff';
        }
        ol.children[circle].style.backgroundColor = 'red';
    }

    var timer = setInterval(function () {
        //手动调用点击事件
        next.click();
    }, 20000);

    // 精灵图
    var lifeservice_li = document.querySelectorAll('.lifeservice li');

    for (var i = 0; i < lifeservice_li.length; i++) {
        var x = -((i % 4) * 60 + 18);
        var y = -(Math.floor(i / 4) * 70 + 15);
        const icon = lifeservice_li[i].querySelector('i');
        icon.style.backgroundPosition = `${x}px ${y}px`;
    }

    var serve_h5 = document.querySelectorAll('.serve ul li h5');
    for (var i = 0; i < serve_h5.length; i++) {
        var y = -53 * i;
        serve_h5[i].style.backgroundPosition = '-250px ' + y + 'px';
    }
})